<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>'v-model' 的修饰符</title>
    <script src="../lib/vue-2.6.12.js"></script>
    <link href="../image/favicon.ico" rel="shortcut icon">
</head>
<body>
   <div id="app">
       <!-- .number 将用户的输入值自动转为数值类型-->
       <input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{n1+n2}}</span>
       <hr>
       <!-- .trim 自动过滤用户输入的首尾空白字符-->
       <input type="text" v-model.trim="userName">
       <button @click="showName">获取用户名</button>
       <hr>
       <!-- .lazy 在“change”时而非“input”时更新-->
       <input type="text" v-model.lazy="userName">


   </div>

   <script>
       const vm = new Vue({
           el: '#app',
           data: {
               userName: '张三',
               n1: 1,
               n2: 2,
           },
           methods: {
               showName(){
                   console.log('获取的用户名为:'+this.userName)
               }
           }
       })

   </script>
</body>
</html>